<template>

  <div>回收站


    <div>
      <div class="file-item" v-for="file in folders" @dblclick="backFolder(file)"  >

        <div class="file-item-select">
          <div class="file-item-select-item"><el-checkbox class="file-select" ref="itemCheck" @change="itemChange(this,file.id)" size="medium" label="" name="type"></el-checkbox></div>
          <div class="file-item-select-item" ><el-button type="danger" icon="el-icon-delete" circle @click="removeFolder(file.id,file.folderName)"></el-button></div>
        </div>

        <div style="height: 100px">
          <svg  class="icon disk-icon" aria-hidden="true">
            <use xlink:href="#icon-folder"></use>
          </svg>
        </div>
        <div class="file-msg">
          <div ><div class="file-name">
            {{file.folderName}}</div></div>
          <div class="file-createTime" v-text="file.createTime"></div>
        </div>

      </div>
      <div class="file-item" v-for="file in files"  @dblclick="backFile(file)">

        <div class="file-item-select">
          <div class="file-item-select-item"><el-checkbox class="file-select" ref="itemCheck" @change="itemChange(this,file.id)" size="medium" label="" name="type"></el-checkbox></div>
          <div class="file-item-select-item" ><el-button type="danger" icon="el-icon-delete" circle @click="removeFile(file.id,file.fileName)"></el-button></div>
        </div>

        <div style="height: 100px">
          <svg  class="icon disk-icon" aria-hidden="true">
            <use :xlink:href="'#icon-'+ (file.bucketName == 'blank' ? file.fileSuffix :file.fileSuffix)"  ></use>
          </svg>
        </div>


        <div class="file-msg">
          <div class="file-msg-one" ><div class="file-name">
            {{file.fileName}}


          </div></div>
          <div class="file-createTime" v-text="file.createTime"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { recycleAll} from '@/api/disk/index'
import { deleteFile,updateFile} from '@/api/disk/file'
import { deleteFolder,saveFolder} from '@/api/disk/folder'
export default {

  name: "recycle",
  data(){
    return{
      files:[],
      folders:[],
      repository:{},
      name:'',

    }
  },
  created() {
    this.init();
  },
  methods:{
    init(){
      recycleAll(this.name).then(re=>{
        console.log(re.data);
        this.files = re.data.data.files;
        this.folders = re.data.data.folders;
        this.repository = re.data.data.repository;

      })
    },
    backFile(folder){
      this.$confirm('该文件['+folder.fileName+']将恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        folder.delFlag = '0';
        updateFile(folder).then(re => {
          if (re.data.code == 0) {
            this.$message.success("文件成功恢复：" + folder.folderName);
            this.init();
          }
        })
      });
    },
    backFolder(folder){
      console.log(folder)

      this.$confirm('该文件夹['+folder.folderName+']将恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        folder.delFlag = '0';
        saveFolder(folder).then(re=>{
          if (re.data.code == 0){
            this.$message.success("文件成功恢复："+folder.folderName);
            this.init();
          }
        })

      });

    },
    removeFile(id,name){
      this.$confirm('该文件将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFile(id).then(re=>{
          this.$message.success("成功删除文件："+name)
          this.init();
        }).catch(()=>{
          this.$message.success("删除失败,文件："+name)
        })


      });
    },
    removeFolder(id,name){

      this.$confirm('该文件夹将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFolder(id).then(re=>{
          this.$message.success("成功删除文件夹："+name);
          this.init();
        }).catch(()=>{
          this.$message.success("删除失败,文件夹："+name)
        })


      });

    }
  }
}
</script>

<style scoped>

.icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.disk-icon{
//background-color: #19be6b;
  height: 120px!important;
  width: 100px!important;
}
.file-item{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  float: left;
  width: 150px;
  margin: 10px;
//background-color: #ed3f14;
  height: 180px;
  border-radius: 10px;

}
.file-item:hover{
  opacity: 0.9;
  background-color: #c8c9cb;
}
.file-item-select-item{
  width: 20px;
  display: none;
}
.file-item:hover .file-item-select-item{
  display: block;
}
.file-select:checked{
  display: block;
}
.file-item-select{
//height: 30px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-self: flex-start;
}
.file-msg{
  font-weight: bold;
  margin-top: 20px;
  width: 100%;
  height: 50px;
//background-color: #2d8cf0;
}
.file-name{

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
//font-size: 20px;
}
.file-createTime{

  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}
</style>
